<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.key作用</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="demo">
			<h2>人员列表</h2>
			<button @click="addPerson">添加一个老刘</button>
			<ul>
				<li v-for="(p,index) in persons" :key="index">
					{{p.name}} - {{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#demo',
			data:{
				persons:[
					{id:'001',name:'张三',age:18},
					{id:'002',name:'李四',age:19},
					{id:'003',name:'王五',age:20},
				]
			},
			methods:{
				addPerson(){
					const liu = {id:'004',name:'老刘',age:13}
					this.persons.unshift(liu)
				}
			}
		})
	</script>
</html>